<script setup>
import { ref } from 'vue'
import { useAsync } from '@/use/useAsync'
import ApplicationWindow from '@/components/ApplicationWindow.vue'
import ApplicationSwipe from '@/components/ApplicationSwipe.vue'
import Loadingcomponent from '@/components/Loadingcomponent.vue'
import ApplicationIList from './components/ApplicationIList.vue'
import TheTop from '@/components/TheTop.vue'
import SearchView from '@/views/search/SearchView.vue'
import { useToggle } from '@/use/useToggle'
import {
  fetchGameList,
  fetchBannerList,
  fetchRecommendList,
  fetchNewList,
  fetchHotList,
} from '@/api/game'
const [isSearchViewShown, toggleSearchView] = useToggle(false)
const data = ref({})
const gameListData = ref([])
const showLoading = ref(false)
// 获取首页"精品游戏"列表
let recommendData = ref([])
const getRecommendList = async () => {
  let data = await fetchRecommendList({})
  console.log(data, 'RecommendListData')
  recommendData.value = data
}
getRecommendList()

// 获取首页banner（轮播图）列表
let bannerListData = ref([])
const getBannerList = async () => {
  let data = await fetchBannerList({})
  console.log(data, 'bannerListData')
  bannerListData.value = data
}
getBannerList()

// 获取首页"新游推荐"列表
let newListData = ref([])
const getNewList = async () => {
  let data = await fetchNewList({})
  console.log(data, 'newListData')
  newListData.value = data
}
getNewList()

// 获取首页"新游推荐"列表
let hotListData = ref([])
const getHotList = async () => {
  let data = await fetchHotList({})
  console.log(data, 'hotListData')
  hotListData.value = data
}
getHotList()

const windowURL = ref(
  'https://t14.baidu.com/it/u=183885528,1591047767&fm=58&app=83&size=w931&q=75&n=0&f=JPEG&fmt=auto&maxorilen2heic=2000000'
)
let bgColor = '#31282a'
</script>
<template>
  <div class="home-page">
    <Transition name="fade">
      <SearchView v-if="isSearchViewShown" @cancel="toggleSearchView"></SearchView>
    </Transition>

    <div v-show="!isSearchViewShown">
      <TheTop @searchClick="toggleSearchView" :itemTitil="$t('home')" :showTime="true" />

      <van-swipe class="my-swipe" indicator-color="white" autoplay="2000" :width="swipeWidth">
        <van-swipe-item v-for="(item, index) in bannerListData" :key="index" class="my-swipe-item">
          <ApplicationWindow
            style="margin-top: 10px; margin-right: 10px"
            :itemData="item"
            :showTitil="true"
          ></ApplicationWindow
        ></van-swipe-item>
      </van-swipe>
      <!-- <ApplicationWindow
        style="margin-top: 10px"
        :bgColor="bgColor"
        :windowURL="windowURL"
        btnHight="60px"
        :showTitil="false"
      ></ApplicationWindow> -->

      <ApplicationIList
        style="margin-top: 12px"
        :itemTitle="$t('Homepage.Fine')"
        :listData="recommendData"
      ></ApplicationIList>

      <ApplicationIList
        style="margin-top: 12px"
        :itemTitle="$t('Homepage.Recommend')"
        :listData="newListData"
      ></ApplicationIList>
      <ApplicationIList
        style="margin-top: 12px"
        :itemTitle="$t('Homepage.Popular')"
        :listData="hotListData"
      ></ApplicationIList>

      <Loadingcomponent :showLoading="showLoading"></Loadingcomponent>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  background: var(--op-gray-bg-color);
  padding-bottom: 70px;
  background: #fff;

  // display: flex;
  // justify-content: center;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
